<template>
  <div class="refReactive">
    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试：{{ obj.a.b.c.d }}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
// 数据
let car = ref({ brand: "奔驰", price: 28 });
let games = ref([
  { id: "01", name: "LOL" },
  { id: "02", name: "CF" },
  { id: "03", name: "飞车" },
]);
let obj = ref({ a: { b: { c: { d: 666 } } } });

// console.log(car);
// 方法
function changeCarPrice() {
  car.value.price += 10;
}
function changeFirstGame() {
  games.value[0].name = "原神";
}
function test() {
  obj.value.a.b.c.d = 999;
}
</script>
<style scoped>
.refReactive {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>